<template>
  <div>
    <NuxtLayout name="pinia-demo-layout">
      <template #header>
        <NuxtLink to="/router-demo/1" class="px-4"> 路由1 </NuxtLink>
        <NuxtLink
          :to="{
            name: 'router-demo-id',
            params: { id: 2 },
            query: { name: '张三', hobby: ['篮球', '足球'] },
          }"
          class="px-4"
        >
          路由2
        </NuxtLink>
      </template>
      <template #default>
        <!-- 子页面的出口 -->
        <NuxtPage :page-key="(route) => route.fullPath" />
      </template>
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
const $router = useRouter();

onMounted(() => {
  $router.push({ name: "router-demo-id", params: { id: 1 } });
});
</script>

<style scoped></style>
